<div id="box">
    <my-input type='text' value='姓名' v-model='uname'></my-input>
    <my-input type='password' value='密码' v-model='pass'></my-input>
    <my-input type='number' value='手机' v-model='phone'></my-input>
    <button @click='registerClick'>获取</button>
    <button @click='clearClick'>清空</button>
</div>
<script src="./js/vue.js"></script>
<script>
    Vue.component("myInput", {
        template: `
               <div>
                    <span>{{title}}</span>
                    <input :type='type' :value='value' @input='handleToInput'/>
               </div>
            `,
        //props直接绑定value，可以与组件实例中的属性v-model关联
        props: ["type", "title", "value"],
        methods: {
            handleToInput(e) {
                this.$emit('input', e.target.value)
            }
        }
    })
    var vm = new Vue({
        el: "#box",
        data: {
            uname: "",
            pass: "",
            phone: 0
        },
        methods: {
            registerClick() {//点击获取所有字段的内容
                console.log(this.uname, this.pass, this.phone);
            },
            clearClick() {
                this.uname = "",
                    this.pass = "",
                    this.phone = ""
            }
        }
    })
</script>